<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <!-- <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="角色名称">
                        <el-input v-model="searchForm.description" placeholder="角色名称" clearable></el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="16">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData">搜索</el-button>
                        <el-button @click="clickResetBtn">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form> -->


        <!-- 新增|刷新 -->
        <div class="flex items-center  mb-4">
            <el-button v-if="developer" type="primary" size="small" @click="clickAddBtn(0)">新增</el-button>
            
        </div>

        <!-- default-expand-all -->
        <el-table :data="tableData" style="width: 100%" v-loading="tableDataLoading" :border="true" 
            :tree-props="{ children: 'children' }" row-key="id">
            <el-table-column prop="name" label="权限名称" align="left" >

            </el-table-column>
            <el-table-column label="权限描述" align="center" >
                <template #default="{ row }">
                    {{ row.description }}
                </template>
            </el-table-column>
            <el-table-column label="访问路径" align="center" >
                <template #default="{ row }">
                    {{ row.url }}
                </template>
            </el-table-column>
            <el-table-column label="icon图标" align="center">
                <template #default="{ row }" >
                    <el-icon :size="25">
                        <component :is="row.icon"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <div>
                        <el-button type="primary" size="small" text @click="clickEditBtn(scope.row)">修改</el-button>

                        <el-button  v-if="developer" type="primary" size="small" text @click="clickAddBtn(scope.row.id)">新增</el-button>

                        <el-popconfirm 
                            title="是否要删除该权限？" 
                            v-if="developer" 
                            confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="clickDeleteBtn(scope.row.id)">
                            <template #reference>
                                <el-button text type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>



        <!-- 新增 更新 抽屉 -->
        <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="clickDrawerSubmitBtn">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
                <el-form-item required label="权限名称" prop="name">
                    <el-input v-model="form.name" placeholder="权限名称"></el-input>
                </el-form-item>
                <el-form-item required label="权限描述" prop="description">
                    <el-input v-model="form.description" placeholder="权限描述"></el-input>
                </el-form-item>
                <el-form-item v-if="developer" required label="url地址" prop="url">
                    <el-input v-model="form.url" placeholder="url地址"></el-input>
                </el-form-item>
                <el-form-item label="顺序" prop="orderNum">
                    <el-input-number v-model="form.orderNum" :min="1" ></el-input-number>
                </el-form-item>
                <el-form-item label="图标">
                    <ElIconPicker v-model="form.icon"></ElIconPicker>
                </el-form-item>
            </el-form>
        </FormDrawer>
    </el-card>

</template>

<script setup>

import { ref, onMounted, reactive, computed } from 'vue'
import { api_permission_list, api_permission_add, api_permission_update, api_permission_delete } from "~/api/permissionApi";
import FormDrawer from '~/components/FormDrawer.vue'
import { toast } from "~/composables/util"
import { isDeveloper } from '~/utils/userInfo.js'
import ElIconPicker from '~/components/el-icon-picker.vue';
import { useStore } from 'vuex'

// 页面变量
const store = useStore()
const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(3)
const tableDataLoading = ref(false)
const developer = ref(false)
const rules = {
    name: [
      { required: true, message: '权限名称不能为空', trigger: 'change' }
    ],
    description: [
      { required: true, message: '权限描述不能为空', trigger: 'change' }
    ],
    url: [
      { required: true, message: 'URL不能为空', trigger: 'change' }
    ],
}
const editId = ref(0)
const drawerTitle = computed(() => editId.value ? "修改" : "新增")
const searchForm = reactive({
    description: "",
    page: currentPage.value,
    size: limit.value,
})
const form = reactive({
    id: editId.value,
    parentId: 0,
    name: "",
    description: "",
    url: "",
    orderNum: 1,
    icon: "",
})
const formRef = ref(null)
const formDrawerRef = ref(null)

// 生命周期
onMounted(() => {
    //判断是否是开发者账号登录
    if(isDeveloper()){
        developer.value = true
    }
    getData()
})

//获取列表数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }

    tableDataLoading.value = true
    searchForm.page = currentPage.value
    api_permission_list(searchForm)
        .then(res => {
            console.log('resp data: ', res)
            tableData.value = res
            total.value = res.total
            currentPage.value = res.current

            // roles.value = res.roles
        })
        .finally(() => {
            tableDataLoading.value = false
        })
}


// 重置表单
function resetForm(row = false) {
    if (formRef.value) formRef.value.clearValidate()
    if (row) {
        for (const key in form) {
            form[key] = row[key]
        }
    }
}

// 点击新增角色抽屉中 提交按钮
const clickDrawerSubmitBtn = () => {
    formRef.value.validate((valid) => {
        if (!valid) return
        console.log('form', form)
        formDrawerRef.value.showLoading()

        const fun = editId.value ? api_permission_update(editId.value, form) : api_permission_add(form)

        fun.then(res => {
            toast(drawerTitle.value + "成功")
            // 修改刷新当前页，新增刷新第一页
            getData(editId.value ? false : 1)
            
            api_permission_list()
                .then(res => {
                    console.log('menu list new ', res)
                    store.dispatch('refreshMenu', res)
                })

            formDrawerRef.value.close()
            
        }).catch(err => {

        }).finally(() => {
            formDrawerRef.value.hideLoading()
        })

    })
}

// 编辑
const clickEditBtn = (row) => {
    editId.value = row.id
    resetForm(row)

    formDrawerRef.value.open()
}

// 新增
const clickAddBtn = (parentId) => {
    editId.value = 0
    resetForm({
        parentId: parentId,
        name: "",
        description: "",
        url: "",
        orderNum: 1,
        icon: "",
    })
    formDrawerRef.value.open()
}

// 删除
const clickDeleteBtn = (id) => {
    tableDataLoading.value = true
    api_permission_delete(id).then(res => {
        toast("删除成功")
        getData()
    }).catch(err => {

    }).finally(() => {
        tableDataLoading.value = false
    })
}

</script>